
How can I use Bootstrap Sass at Visual Studio?

There're many way to achieve this, but you can just use Nuget with visual
studio to do this.

Nuget + Web Compiler

Use nuget to download the sass bootstrap to your web application.

Twitter.Bootstrap.Sass

`PM> Install-Package Twitter.Bootstrap.Sass`

![](https://d1p0mp3f1fx0hz.cloudfront.net/_jzluib1ec.png)

Once you have installed bootstrap file to your application, you can install
following visual studio plugin to compile the sass to css.

Web Compiler

This web compiler will compile the sass into css file for you.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_662y1ulxw.png)


How can I use Bootstrap Sass at Visual Studio?There're many way to achieve this, but you can just use Nuget with visual studio to do this.Nuget + Web Compiler

How to Use Bootstrap SCSS at Visual Studio 2015


if you want to apply following media specific style to the site, you could use
CSS3 media query.

/* apply these style when width is greater than 240px */
@media only screen and (min-width : 240px)
{
}

Check the detail document from following url, CSS media queries.

Also,
CSS3 media queries' specification.

In additional, probably should use modernizr at your site. see
modernizr.js. Media Query is CSS3 features, but if the browser doesn't support it you
might have to do something your own at your site.


How to Use CSS3 Media Query


sample code for apply style only for tablet, mobile, inserting cotent between
links by css.

a example code of adding content seperater '|' between links and use media
query apply style for width less than 1024px;

```
@media (max-width: 1024px){
    .my-footer ul li{
        display:inline;
    }

    .my-footer ul li a{
        margin-right:1px;
    }

    .my-footer ul > li > a::after{
        content: " | ";
    }

    .my-footer ul > li:last-child a::after{
        content: "";
    }
}


```

How it looks like

![](https://d1p0mp3f1fx0hz.cloudfront.net/_7smptsa8y.png)


sample code for apply style only for tablet, mobile, inserting cotent between links by css.

CSS Add Content Between Links


1. Find out what's font you'd like to use

2. google fonts page

3. Go to above link to check what's the font want to use.

4. For instance, i'm using Light 300 for Open Sans![](https://d1p0mp3f1fx0hz.cloudfront.net/_xdmsaodzj.png)

5. Add code to your Web Application

6. Add google api link & add font family to the css

7. ![](https://d1p0mp3f1fx0hz.cloudfront.net/_3pvffyv8f.png)

8. Code of link

9.

10. Code example of add to the css, bootstrap SASS

11. ```
$font-family-sans-serif:  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
```


  12. Example UI


    13. Following is the layout after I update the google font api.![](https://d1p0mp3f1fx0hz.cloudfront.net/_u8lpkc44y.png)




Furthermore, if you need more information about google fonts, see following
  links.


Getting Started Google Fonts


Category SCSS

How to Use Bootstrap SCSS at Visual Studio 2015

How to Use CSS3 Media Query

CSS Add Content Between Links

How to add Google Fonts to Your WebSite